framer-motion v7 版本做了不少幅度的更新，包含移除了 useViewportScroll 新增了 useScroll。改用 useScroll 有一項大幅度的功能新增就是除了支援頁面 Page scroll 也支援了容器 Element scroll、Element position
。趁這次改版來好好熟悉如何使用

useScroll

用來去製作 scroll-linked 動畫，像是頁面滑動進度指標或是 parallax 。

useScroll 回傳下列的 motion values
scrollX / scrollY :滑動的絕對位置，單位為 px
scrollXProgress / scrollYProgress : 進度的過程，在 0 和 1 之間

useScroll Page scroll

作為預設，不帶入任何參數 useScroll 將會追蹤頁面滑動 page scroll

const { scrollY } = useScroll()

useEffect(() => {
  return scrollY.onChange((latest) => {
    console.log("Page scroll: ", latest) // 會持續更新 console 滑動的位置
  })
}, [])

應用:利用 scrollYProgress 製作頁面滑動進度條

import { Box } from '@chakra-ui/react'
import { motion, useScroll } from "framer-motion";

<>
    <MotinBox 
      style={{ scaleX: scrollYProgress }} //根據頁面滑動進度改變 scaleX ， 0 -> 1
      positon="fixed"
      top="0"
      left="0"
      transformOrigin="0%" // 變更 transform 的軸點
    />
    
    <Article />

</>

可以結合 useSpring 讓過程動畫有流動感

const scaleX = useSpring(scrollYProgress)

<MotinBox 
 style={{ scaleX }} 
/>